<style>
	.rating {
		overflow: hidden;
		display: inline-block;
	}
	.rating-input {
		position: absolute;
		left: 0;
		top: -50px;
	}
	.rating-star {
		display: block;
		float: right;
		width: 14px;
		height: 14px;
		background: url('../images/sprite.png') -454px -182px;
	}
	.rating-star:hover,
	.rating-star:hover ~ .rating-star,
	.rating-input:checked ~ .rating-star {
		background-position: -454px -165.5px;
	}
</style>

<span class="rating">
	<input type="radio" class="rating-input" id="rating-input-1-5" name="rating" value="5"/>
	<label for="rating-input-1-5" class="rating-star"></label>
	<input type="radio" class="rating-input" id="rating-input-1-4" name="rating" value="4"/>
	<label for="rating-input-1-4" class="rating-star"></label>
	<input type="radio" class="rating-input" id="rating-input-1-3" name="rating" value="3" checked="checked"/>
	<label for="rating-input-1-3" class="rating-star"></label>
	<input type="radio" class="rating-input" id="rating-input-1-2" name="rating" value="2"/>
	<label for="rating-input-1-2" class="rating-star"></label>
	<input type="radio" class="rating-input" id="rating-input-1-1" name="rating" value="1" />
	<label for="rating-input-1-1" class="rating-star"></label>
</span><!-- /.rating -->
